<template>
  <div :class="ns.b()">
    <div class="page-title">废塑料综合利用规范企业</div>

    <div class="filter-wrapper">
      <vc-filter :menus="menus">
        <template #search>
          <filter-search :width="175" v-model="searchTxt" placeholder="请输入企业名称"
                    @enter="handlerInput" @clear="handlerInput"/>
        </template>
      <span class="total-num">
        共计
        <sapn style="color: rgba(255, 89, 89, 1)">&nbsp;{{ totalNum }}&nbsp;</sapn>
        条
      </span>
      </vc-filter>
    </div>

    <div class="table-wrapper">
      <vc-table
        :loading="loading"
        :tableData="tableData"
        :columns="columns"
        :total="totalNum"
        :pageSize="queryData.pageSize"
        v-model:pageNum="queryData.pageNum"
        :defaultSort="{ field: 'noticeDate', order: 'desc' }"
        @page-change="handleCurrentChange"
        @sort-change="sortChange"
      />
    </div>

    <vc-dialog v-model="showDialog" width="20vw" height="22vh" title="状态" title-align="center">
      <p class="dialog-row label-tag">
        <span :class="dialogData.className">{{ dialogData.showText }}</span>
      </p>
      <p class="dialog-row">
        <span>披露日期：</span>
        <span>{{ dialogData.revocationNoticeDate }}</span>
      </p>
      <p class="dialog-row">
        <span>信息来源：</span>
        <a @click="toRevocationSource(dialogData.revocationFileType, dialogData.revocationFileUrl)">{{ dialogData.revocationCatalogueName }}</a>
      </p>
    </vc-dialog>
  </div>
</template>

<script setup lang="ts">
import { useNamespace } from 'vc/src/use';
import FilterSearch from '@/components/page-search/index.vue';
import { useScreen } from './useScreen';
import { useTable } from './useTable';
import { getData } from '../apis';
import { usePage } from '@/use/usePage';
import { setHrefUrlTool } from '@/utils';

const ns = /* hoist-static*/ useNamespace('wastePlastic');
defineOptions({ name: ns.b() });

const { queryData, menus } = useScreen();

const { tableData, showDialog, dialogData, columns } = useTable();

const { loading, run } = useRequest(getData, {
  defaultParams: [queryData],
  onSuccess: (res) => {
    totalNum.value = res.total;
    tableData.value = res.values;
  }
});

const { totalNum, searchTxt, handlerInput, handleCurrentChange, sortChange } = usePage(queryData, run);

const toRevocationSource = (fileType, fileUrl) => {
  if (fileType && fileUrl) {
    setHrefUrlTool(fileType, fileUrl);
  }
};
</script>

<style lang="scss" scoped>
@import '../index.scss';

:deep(.revocation) {
  padding: 3px 10px;
  color: #fff;
  cursor: pointer;
}
:deep(.revocation-03b915) {
  background-color: #03b915;
}
:deep(.revocation-ec808d) {
  background-color: #ec808d;
}

:deep(.dialog-row) {
  &.label-tag {
    text-align: center;
  }
  margin: 10px;
  font-size: 14px;
  a {
    color: #409eff;
    cursor: pointer;
  }
}
</style>
